<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Dom</title>
		<script src="../../py/system.js" type="text/javascript"></script>
		<script src="../../py/system/dom/element.js" type="text/javascript"></script>
		
		<script src="../../common/project/project.js" type="text/javascript"></script>
		<script src="../../common/assets/scripts/default.js" type="text/javascript"></script>
		<script src="../../common/assets/scripts/debug.js" type="text/javascript"></script>
	</head>
	<body> 
		<div style="height:300px; width:200px; background: #768567;position:absolute; margin:67px; left:600px; z-index:100; overflow: scroll; border: 20px solid #768567; padding:3px; " id="a">
		<div id='b' style='width:600px; margin: 45px;padding:6px;'>contents</div>
		</div>
		
		<div style='position:absolute;left:0px;top:0px; background:blue; z-index:100' id='info'></div>
		<script>
			var a = $('a'),  b = $('b');
			
			$(document.body);
			var fns = [
				"basic element",
				["Element.prototype.getOffsetParent", function(){ return a.getOffsetParent(); }],
				["Element.prototype.getOffsets", function(){ return showInfo(a.getOffsets(), a); }],
				["Element.prototype.getPosition", function(){ return showInfo(a.getPosition(), a); }],
				["Element.prototype.getPosition(true)", function(){ return showInfo(a.getPosition(a.getOffsetParent()), a); }],
				"inner element",
				["Element.prototype.getOffsetParent", function(){ return b.getOffsetParent(); }],
				["Element.prototype.getOffsets", function(){ return showInfo(b.getOffsets(), b); }],
				["Element.prototype.getPosition", function(){ return showInfo(b.getPosition(), b); }],
				["Element.prototype.getPosition(true)", function(){ return showInfo(b.getPosition(b.getOffsetParent()), b); }],
				"document",
				["document.getOffsetParent", function(){ return document.getOffsetParent(); }],
				["document.getOffsets", function(){ return document.getOffsets(); }],
				["document.getPosition", function(){ return document.getPosition(); }],
				["document.getPosition(value)", function(){ return document.getPosition(document.getOffsetParent()); }],
				"document.body",
				["document.body.getOffsetParent", function(){ return document.body.getOffsetParent(); }],
				["document.body.getOffsets", function(){ return document.body.getOffsets(); }],
				["document.body.getPosition", function(){ return document.body.getPosition(); }],
				["document.body.getPosition(value)", function(){ return document.body.getPosition(document.getOffsetParent()); }],
				"extra",
				["Element.prototype.getOffset", function(){ return a.getOffset(); }],
				["Element.prototype.setOffset", function(){ a.setOffset({
					x: 3,
					y: 7
				}); }],
				["Element.prototype.setPosition", function(){ a.setPosition({
					x: 3,
					y: 7
				}); }],
				["document.setPosition", function(){ return document.setPosition({
					x: 3,
					y: 7
				}); }]
			];
			
			
			$('info').setOpacity(.5);
			function showInfo(p, elem){
				var style = $('info').style;
				style.left = p.x+ 'px';
				style.top = p.y+ 'px';
				style.width = elem.getSize().x + 'px';
				style.height = elem.getSize().y + 'px';
				$('info').show();
				return p;
			}
			
			function c(){
				$('info').hide();
			}
		</script>
	</body>
</html>
